// 1. 发送 ajax 请求
// GET /message-list.json   我约定俗称的习惯，当响应体是 application/json 时，资源路径以 .json 结尾
var xhr = new XMLHttpRequest()
xhr.open('get', '/message-list.json')
// 2. 在得到响应结果后，根据数据列表修改 DOM 树
xhr.onload = function() {
    // 得到响应结果
    console.log(this.status)        // 响应状态
    console.log(this.responseText)  // 响应体中应该放的就是 JSON 格式字符串

    // 假设后端没有错误，则相信返回的一定符合 JSON 格式标准
    // 进行 JSON 的反序列化：字符串 -> JS 对象
    var ml = JSON.parse(this.responseText)  // 如果返回的不是 JSON 格式，则会解析异常

    // 根据列表中的内容，修改 DOM 树
    // 前端需要和后端一起商定返回的数据结构是什么样的 —— 指定业务 API 标准
    // 咱这里假定：[{消息1}, {消息2}, {消息3}, ...]
    // 每个消息的格式：  { "who": "...", "whom": "...", "what": "..." }
    // 那咱（前端）就认为后端说话算话，就按照这种格式进行代码处理
    // ml 是一个 js 中的数组，其中每个元素都有 who、whom、what 属性可以使用

    // 遍历 ml，针对每个消息对象，为 <tbody> 添加一个 <tr> 孩子（tr ： 表中的一行）
    // 每个 <tr> 下有 3 个 <td> 孩子（td：该行的一列），分别是 who（谁）、whom（对谁）、说什么（what）

    // 遍历方式 1
//    for (var i = 0; i < ml.length; i++) {
//        var m = ml[i]
//    }

    // 遍历方式 2
//    for (var i in ml) {
//        var m = ml[i]
//    }

    // 遍历方式 3
    var oTbody = document.querySelector('tbody')
    for (var m of ml) { // 每循环一次，添加一个，所以，后端返回的列表中，有几条消息，就会循环几次，添加几次，让我们看到所有的消息
        // m 就是元素
        // 要添加到 tbody 的其中一个孩子
        var html = `<tr><td>${m.who}</td><td>${m.whom}</td><td>${m.what}</td></tr>`   // 模板字符串 | 反引号

        oTbody.innerHTML += html // 修改 tbody 内部的标签，认为添加了一个 <tr> 孩子
    }

    // 为 DOM 树中的某个结点添加孩子，有两种方式
    // 1:
    // element.innerHTML += HTML 字符串
    // 2:
    // child = document.createElement(...)
    // element.appendChild(child)
}
xhr.send()